<template>
  <div class='container'>
    <header-nav :user='userObj' />
    <van-tabs v-model="active">
      <van-tab :title=" v.title" v-for='( v,index) in channelList' :key="index">
        <channel-list :item='v' />
      </van-tab>
      <div class='file' slot="nav-right">
      </div>
      <div @click='isShowChannel=true' class='filex' slot="nav-right">
        <van-icon name="arrow-down" />
      </div>
    </van-tabs>
    <van-popup closeable close-icon-position="top-left" v-model="isShowChannel" position="bottom" :style="{ height:'100%' }">
      <all-channel v-if='isShowChannel' @close='isShowChannel=false' v-model='active' :list='channelList' />
    </van-popup>
  </div>
</template>
<script>
import HeaderNav from '@/components/header-nav/'
import { getProfile } from '@/api/user.js'
import { getCateGory } from '@/api/channel.js'
import AllChannel from './components/all-channel.vue'
import ChannelList from './components/channel-list.vue'
import { mapState } from 'vuex'
export default {
  name: 'homeIndex',
  components: {
    HeaderNav,
    AllChannel,
    ChannelList
  },
  data() {
    return {
      userObj: {},
      channelList: null,
      active: 0,
      isShowChannel: false
    }
  },
  created() {
    this.loadcategory()
  },
  activated() {
    if (!this.profile) {
      this.loadProfile()
    }
  },
  methods: {
    async loadProfile() {
      const { data: res } = await getProfile(this.user.id)
      this.userObj = res[0]
      this.$store.commit('setProfile', this.userObj)
    },
    async loadcategory() {
      const { data: res } = await getCateGory()
      this.channelList = res
    }
  },
  computed: {
    ...mapState(['user', 'profile'])
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
/deep/ .van-tabs__line {
  bottom: 20px;
  width: 30px;
}
.file {
  width: 38px;
  flex-shrink: 0;
  // background-color: pink;
}
.filex {
  position: fixed;
  width: 38px;
  right: 0px;
  text-align: center;
  top: 57px;
  font-size: 20px;
  // background-color: pink;
  background-color: rgba(255, 255, 255, 0.8);
}
/deep/.van-list {
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 50px;
  > div {
    display: inline-block;
  }
  .van-list__finished-text {
    display: block;
    line-height: 50px;
    margin-bottom: 100px;
    background-image: linear-gradient(45deg, #3c1272, #ff5d41);
  }
}
</style>
